<template>
  <div class="body">
    <div class="container">
      <div style="padding: 0px 20px">
        <div style="height: 80px"></div>
        <block v-if="item.desc">
          <view class="title">{{ item.desc }}</view>
          <view class="dividingLine"></view>
        </block>
        <view class="illustrate">请在下方告诉AI你想要什么</view>
        <el-input
          class="textareaBox"
          type="textarea"
          :rows="10"
          placeholder="请输入"
          v-model="item.body"
        />

        <block v-for="(item, index) in item.enterTheList" :key="index">
          <view class="illustrate">{{ item.name }}</view>
          <el-input
            v-model="item.data"
            placeholder="请输入"
            class="inputBox"
          ></el-input>
        </block>

        <button @click="generate" class="determineTheBuild" type="primary">
          生成
        </button>
        <button
          @click="router().back()"
          class="determineTheBuildBack"
          type="primary"
        >
          返回上一页
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElNotification } from "element-plus";
import router from "@/router";
import { GetUserInfo } from "../../../api/BSideApi";
import store from "@/store";

export default {
  name: "CreateEditView",
  methods: {
    router() {
      return router;
    },
  },
  setup() {
    let router = useRouter();
    let item = ref(
      JSON.parse(decodeURIComponent(router.currentRoute.value.query.item))
    );

    function generate() {
      if (!this.item.body)
        return ElMessage({
          message: "请输入内容",
          type: "warning",
        });

      getUser();
      let frequency = store.getters.userinfo.frequency;
      if (parseInt(frequency) <= 0) {
        ElNotification({
          title: "错误",
          message:
            "SUPER币不足，可前往小程序签到领取，或使用兑换码兑换Ai币，在网页端赞助也可获得Ai币",
          type: "error",
        });
        return;
      }

      // TODO 合成问题
      let problemData = "";
      if (item.value.enterTheList)
        item.value.enterTheList.slice(-2).forEach(({ name, data }, index) => {
          if (index === item.value.enterTheList.length - 1) {
            problemData += name;
            problemData += ":";
            problemData += data;
            problemData += "，";
          } else {
            problemData += name;
            problemData += ":";
            problemData += data + "，";
          }
        });
      problemData += item.value.body;

      router.push({
        path: "/create_detail",
        query: {
          role: item.value.role
            ? encodeURIComponent(JSON.stringify(item.value.role))
            : false,
          item: encodeURIComponent(JSON.stringify(problemData)),
        },
      });
    }

    async function getUser() {
      try {
        let res = await GetUserInfo();

        store.commit("setUserinfo", res);
      } catch (e) {
        console.log(e);
      }
    }

    return {
      item,
      generate,
    };
  },
};
</script>

<style scoped>
.body {
  scroll-behavior: smooth;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  flex-direction: column;
  flex: 1;
  align-items: center;
  padding: 0 20px 100px;
  display: flex;
  overflow: auto;
  background-color: var(--bgColor2);
}

@keyframes explainAnimation {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

.container {
  max-width: 800px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px 100px;
  animation: explainAnimation 0.3s;
}

.title {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.4;
  color: var(--textColor1);
  margin-bottom: 15px;
  display: block;
}

.dividingLine {
  width: 100%;
  height: 1px;
  background-color: var(--borderColor);
  margin-top: 10px;
  margin-bottom: 20px;
  display: block;
}

.illustrate {
  display: block;
  margin: 10px 0;
  color: var(--textColor1);
  font-size: 13px;
}

>>> .inputBox > .el-input__wrapper {
  box-shadow: none;
  width: 100%;
  height: 40px;
  border-radius: 8px;
  background-color: var(--bgColor1);
  color: var(--textColor1);
  font-size: 15px;
  box-sizing: border-box;
  padding: 0 15px;
  outline: none;
  margin-bottom: 10px;
}

>>> .textareaBox > .el-textarea__inner {
  width: 100%;
  border-radius: 7.5px;
  background-color: var(--bgColor1);
  color: var(--textColor1);
  font-size: 15px;
  outline: none;
  margin-bottom: 20px;
  box-shadow: none;
  box-sizing: border-box;
  padding: 15px;
}

.determineTheBuild {
  font-size: 15px;
  background-color: var(--themeColor1);
  color: var(--themeTextColor);
  border-radius: 100px;
  height: 40px;
  width: 300px;
  max-width: 100%;
  line-height: 40px;
  border: 0;
  display: table;
  margin: 50px auto 0 auto;
  cursor: pointer;
  opacity: 1;
}

.determineTheBuild:hover {
  background-color: var(--themeColor1);
  opacity: 0.8;
}

.determineTheBuildBack {
  font-size: 15px;
  background-color: var(--bgColor3);
  color: var(--textColor1);
  border-radius: 100px;
  height: 40px;
  width: 300px;
  max-width: 100%;
  line-height: 40px;
  border: 0;
  display: table;
  margin: 30px auto 30px auto;
  cursor: pointer;
  opacity: 1;
}

.determineTheBuildBack:hover {
  background-color: var(--bgColor3);
  opacity: 0.8;
}

@media only screen and (max-width: 767px) {
  .container {
    padding: 0;
  }
}
</style>
